<template>
	<view class="body">
		
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>头像</view>
			<view class="u-f-ac" @tap="changeimg">
				<image :src="userpic" mode="aspectFill" lazy-load></image>
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>昵称</view>
			<view class="u-f-ac">
				<input type="text" v-model="username" />
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>性别</view>
			<view class="u-f-ac" @tap="changeOne('sex')">
				<view>{{sex}}</view>
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>生日</view>
			<picker mode="date" :value="birthday" :start="birthday" :end="endDate" @change="bindDateChange">
				<view class="u-f-ac">
					<view>{{birthday}}</view>
					<view class="iconfont icon-yixianshi-"></view>
				</view>
			</picker>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>情感</view>
			<view class="u-f-ac" @tap="changeOne('qg')">
				<view>{{qg}}</view>
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>职业</view>
			<view class="u-f-ac" @tap="changeOne('job')">
				<view>{{job}}</view>
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view>家乡</view>
			<view class="u-f-ac" @tap="showMulLinkageThreePicker">
				<view>{{pickerText}}</view>
				<view class="iconfont icon-yixianshi-"></view>
			</view>
		</view>
		
		<button class="user-set-btn"
		type="primary" @tap="submit">完成</button>
		
		<mpvue-city-picker themeColor="#007AFF" ref="mpvueCityPicker" 
		:pickerValueDefault="cityPickerValueDefault"
		@onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	let sex = ['男','女'];
	let qg = ['保密','未婚','已婚'];
	let job = ['前端','JAVA','UI','大数据'];
	import mpvueCityPicker from "../../components/mpvue-citypicker/mpvueCityPicker.vue"
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				userpic:"../../static/img/gg.jpg",		
				username:"奇奇",
				sex:"男",
				qg:"未婚",
				job:"IT",
				birthday:"1997-05-30",
				cityPickerValueDefault:[0,0,1],
				pickerText:"湖北-宜昌市-点军区"
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			onBackPress(){
				if(this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel();
					return true;
				}
			},
			onUnload() {
				if(this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel();
				}
			},
			// 三级联动
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				this.pickerText = e.label
			},
			// 修改生日
			bindDateChange(e) {
			    this.birthday = e.target.value
			},
			// 修改头像
			changeimg(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: (res)=> {
						// console.log(JSON.stringify(res.tempFilePaths[0]))
						// this.userpic = JSON.stringify(res.tempFilePaths[0])
						this.userpic = res.tempFilePaths[0]
				    }
				});
			},
			// 单列选择
			changeOne(val){
				let arr = [];
				switch(val){
					case 'sex':
					arr=sex;
					    break;
					case 'qg':
					arr=qg;
						break;
					case 'job':
					arr=job;
						break;
				}
				uni.showActionSheet({
				    itemList: arr,
				    success: res=> {
				        switch(val){
				        	case 'sex':
				        	this.sex = arr[res.tapIndex];
				        	    break;
				        	case 'qg':
							this.qg = arr[res.tapIndex];
				        		break;
				        	case 'job':
							this.job = arr[res.tapIndex];
				        		break;
				        }
				    }
				});
			},
			submit(){},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
@import "../../common/form.css";                                                           
.user-set-userinfo-list {
	padding: 20upx;
	border-bottom: 1upx solid #F4F4F4;
}
.user-set-userinfo-list>view:first-child {
	font-size: 32upx;
	font-weight: bold;
	color: #9B9B9B;
}
.user-set-userinfo-list>view:last-child>image{
	width: 80upx;
	height: 80upx;
	border-radius: 100%;
}
.user-set-userinfo-list>view:last-child>input{
	text-align: right;
}
.user-set-userinfo-list>view:last-child>view:last-of-type {
	margin-left: 20upx;
	color: #9B9B9B;
}
</style>
